<!--  -->
<template>
    <div class="calendar">
        <div class="header">
            <ul class="head">
                <li class="item"
                :class="{'head-active':active==i.date}"
                v-for="(i,index) in headArr" 
                :key="index"
                @click="changeDate(i)"
                >
                    {{i.weekStr}}{{i.dateStr}}
                </li>
            </ul>
            <div class="more" @click="isCalendarShow= !isCalendarShow">更多</div>
        </div>

        <ul class="picker">
            <li class="picker-item"  :class="{'active':pickerActive==i.time}" v-for="i in pickerArr" :key="i.id" @click="selectPicker(i)">
                {{i.time}}
            </li>
        </ul>

        <div class="footer">
            
            <p>选择时间: <span v-show="pickerActive&&active" class="footer-time">{{active}} {{pickerActive}}</span> </p>
            <p v-if="pickerActive&&active"> 下一步</p>
            <p v-else>请选择时间</p>
        </div>

        <div class="pop" v-show="isCalendarShow">
            <div class="pop-content">
                <div class="date-header">
                <div class="pre" @click="handlePrev">
                    <div class="pre-month"></div>
                </div>
                <div class="show-date">{{ showDate }}</div>
                <div class="next" @click="handleNext">
                    <div class="next-month"></div>
                </div>
            </div>
            <div class="date-content">
                <div class="week-header">
                    <div
                        v-for="item in [
                            '日',
                            '一',
                            '二',
                            '三',
                            '四',
                            '五',
                            '六',
                        ]"
                        :key="item"
                    >
                        {{ item }}
                    </div>
                </div>
                <div class="week-day">
                    <div
                        class="every-day"
                        :class="item.isCanSelect ? {'active' :item.date == active}: 'disable'"
    
                        v-for="(item, index) in calendarArr"
                        :key="index"
                        @click="selectDate(item)"
                    >
                        {{ item.order }}
                    </div>
                </div>
            </div>
            </div>
            
        </div>


    </div>
</template>

<script>
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            headArr:[],
            isCalendarShow: false,
            year: null,
            month: null,
            day: null,
            showDate: "",
            nowYear: null,
            nowMonth: null,
            nowDay: null,
            active:'',
            currentDate: "",
            calendarArr: [],
            pickerActive: '',
            pickerArr:[
                {
                    time:'08:00',
                    id:1,
                },
                {
                    time:'08:30',
                    id:2,
                },
                {
                    time:'09:00',
                    id:3,
                },
                {
                    time:'09:30',
                    id:4,
                },
                {
                    time:'10:00',
                    id:5,
                },
                {
                    time:'10:30',
                    id:6,
                },
                {
                    time:'11:00',
                    id:7,
                },
                {
                    time:'11:30',
                    id:8,
                },
                {
                    time:'12:00',
                    id:9,
                },
                {
                    time:'12:30',
                    id:10,
                },
                {
                    time:'13:00',
                    id:11,
                },
                {
                    time:'13:30',
                    id:12,
                },
                {
                    time:'14:00',
                    id:13,
                },
                {
                    time:'14:30',
                    id:14,
                },
                {
                    time:'15:00',
                    id:15,
                },
                {
                    time:'15:30',
                    id:16,
                },
                {
                    time:'16:00',
                    id:17,
                },
                {
                    time:'16:30',
                    id:18,
                },
                {
                    time:'17:00',
                    id:19,
                }
            ],
            tomorrowDate:'',
            newDate:''

        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        
        getInitDate() {
            const date = new Date();
            this.year = date.getFullYear();
            this.month = date.getUTCMonth() + 1;
            this.day = date.getDate();

            this.showDate = this.getCurrentDate();
            this.active = this.showDate
            
            this.getMonth(this.year, this.month);
            this.getHeadArr()
        },

        //获取当前日期
        getCurrentDate() {
            const date = new Date();
            this.nowYear = date.getFullYear();
            this.nowMonth =
                date.getUTCMonth() + 1 < 10
                    ? "0" + (date.getUTCMonth() + 1)
                    : date.getUTCMonth() + 1;
            this.nowDay =
                date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            this.currentDate = `${this.nowYear}-${this.nowMonth}-${this.nowDay}`;
            this.tomorrowDate = `${this.nowYear}-${this.nowMonth}-${(date.getDate()+1)< 10 ? "0" + (date.getDate()+1) :(date.getDate()+1)}`;
            this.nextDate = `${this.nowYear}-${this.nowMonth}-${(date.getDate()+2)< 10 ? "0" + (date.getDate()+2) :(date.getDate()+2)}`;
            return this.currentDate;
        },
        // 获取每个月一号是星期几的下标， ['日', '一', '二', '三', '四', '五', '六']
        beginDay() {
            return new Date(this.year, this.month - 1, 1).getDay();
        },
        // 获取日期星期几字符串
        getWeek(dateString) {
            var dateArray = dateString.split("-");
            let date = new Date(
                dateArray[0],
                parseInt(dateArray[1] - 1),
                dateArray[2]
            );
            return "周" + "日一二三四五六".charAt(date.getDay());
        },
        // 根据年月获取指定月份天数，例：year:2021,month:7
        getMonth(year, month) {
            let day = new Date(year, month, 0).getDate();
            let index = this.beginDay();
            let arr = [];
            for (let i = 0; i < index; i++) {
                let obj = {
                    isCanSelect: false,
                    day: "",
                    date: "",
                    order: "",
                };
                arr.push(obj);
            }
            let dateArr = [];
            for (let i = 0; i < day; i++) {
                let date = `${year}-${month < 10 ? "0" + month : month}-${
                    i + 1 < 10 ? "0" + (i + 1) : i + 1
                }`;
                let dayObj = {
                    isCanSelect: this.currentDate > date ? false : true,
                    order: i + 1,
                    day: i + 1 < 10 ? "0" + (i + 1) : i + 1 + "",
                    date: date,
                };
                dateArr.push(dayObj);
            }
            this.calendarArr = arr.concat(dateArr);
        },
        // 上一月
        handlePrev() {
            if (this.month == 1) {
                this.month = 12;
                this.year--;
            } else {
                this.month--;
            }
            this.getMonth(this.year, this.month);
            this.showDate = `${this.year}-${
                this.month < 10 ? "0" + this.month : this.month
            }-01`;
        },
        // 下一月
        handleNext() {
            if (this.month == 12) {
                this.month = 1;
                this.year++;
            } else {
                this.month++;
            }
            this.getMonth(this.year, this.month);
            this.showDate = `${this.year}-${
                this.month < 10 ? "0" + this.month : this.month
            }-01`;
        },

        changeDate(item){
            this.pickerActive = ''
            this.active = item.date
        },

        selectDate(item) {
            if (item.isCanSelect) {
                this.pickerActive = ''
                this.showDate = item.date;
                this.active = item.date
                this.isCalendarShow = false
                if(this.active == this.currentDate){
                    this.getHeadArr(false)
                }else{
                    this.getHeadArr(true)
                }
            }
        },

        selectPicker(item) {
            this.pickerActive = item.time
        },

        getHeadArr(e){
            let arr = []
            let days= ['今天','明天','后天']
            let dayArr = [this.currentDate,this.tomorrowDate,this.nextDate]
            let index = dayArr.indexOf(this.active)
            if(index>=0){
                console.log(days[index]) 
                for(let i = index; i<index+4; i++){
                    let obj= {
                        date: this.GetDateStr(this.active,i-index),
                        dateStr: this.GetDateStr(this.active,i-index).slice(5),
                        weekStr: i<3? days[i] : this.getWeek(this.GetDateStr(this.active,i-index))
                    }
                    arr.push(obj)
                }
                console.log(arr)
            }else{
                for(let i = 0; i<4; i++){
                    let obj= {
                        date:  this.GetDateStr(this.active,i),
                        dateStr:  this.GetDateStr(this.active,i).slice(5) ,
                        weekStr: this.getWeek(this.GetDateStr(this.active,i))
                    }
                    arr.push(obj)
                }
                console.log(arr)
            }

            this.headArr = arr
        },
        // js获取日期：前天、昨天、今天、明天、后天 // date 代表指定的日期，格式：2021-07-26
        GetDateStr(date,AddDayCount) {

            var dd = new Date(date);
            dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
            var y = dd.getFullYear();
            var m = dd.getMonth()+1;//获取当前月份的日期
            var d = dd.getDate();

            return `${y}-${m<10?'0'+m:m}-${d<10?'0'+d:d}`
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getInitDate();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

* {
    margin: 0px;
    border: 0px;
    list-style: none;
}

.calendar {
    font-size: 14px;
    background-color: #fff;
}

.header{
    position: relative;
    display: flex;
    align-items: center;
    width:100%;
    height: 50px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.head {
    width:100%;
    display: flex;
    align-items: center;
    padding-right: 50px;
    overflow-x: auto;
}

.more {
    position: absolute;
    top:0;
    right:0;
    display: flex;
    align-items: center;
    justify-content: center;
    width:50px;
    height:49px;
    background-color: #fff;
}

.item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    flex-shrink: 0;
}


.picker{
    display: flex;
    align-items: center;
    flex-wrap:wrap;
}


.picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 60px;
}


.date-header {
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
}

.pre {
    display: flex;
    align-items: center;
    width: 50px;
}

.next {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 50px;
}

.pre-month {
    display: inline-block;
    height: 0px;
    width: 0px;
    border: 10px solid;
    border-color: transparent rgb(35, 137, 206) transparent transparent;
}

.next-month {
    display: inline-block;
    height: 0px;
    width: 0px;
    border: 10px solid;
    border-color: transparent transparent transparent rgb(35, 137, 206);
}

.show-date {
    text-align: center;
    flex: 1;
    color: rgb(35, 137, 206);
}

.week-header {
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    text-align: center;
    height: 50px;

    div {
        flex:1;
    }
}

.week-day {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #fff;
}
.every-day {
    font-size: 14px;
    width: 14.28%;
    height: 60px;
    text-align: center;
    line-height: 60px;
}

.active {
    color: #fff;
    background-color: red;
    border-radius: 8px;
}

.disable {
    color: #ccc;
}

.head-active {
    color: red;
}

.pop {
    position: fixed;
    top:0;
    left:0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index:9
}

.footer {
    position: fixed;
    bottom:0;
    left:0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    box-sizing: border-box;
}

.footer-time {
    color: red
}
</style>